<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>事件处理-VUE</title>
		<script src="../assets/js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<button v-on:click="counter+=1">通过js代码共点击了{{counter}}次</button>
			<br />
			<button name="buName" @click="greet('hello', $event)">通过greet方法点击了{{greetCounter}}</button>
			<br />
			<button @dblclick="dbGreet()">通过dbGreet方法点击了{{dbGreetCounter}}次</button>
			
			
			<!-- 阻止单击事件继续传播 -->
			<a v-on:click.stop="doThis"></a>
			
			<!-- 提交事件不再重载页面 -->
			<form v-on:submit.prevent="onSubmit"></form>
			
			<!-- 修饰符可以串联 -->
			<a v-on:click.stop.prevent="doThat"></a>
			
			<!-- 只有修饰符 -->
			<form v-on:submit.prevent></form>
			
			<!-- 添加事件监听器时使用事件捕获模式 -->
			<!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
			<div v-on:click.capture="doThis">...</div>
			
			<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
			<!-- 即事件不是从内部元素触发的 -->
			<div v-on:click.self="doThat">...</div>
		</div>
		<script src="../assets/js/eventHandle.js"></script>
	</body>
</html>
